<template>
  <el-container>
    <el-container class="el-mainContent" direction="vertical"> 
      <!-- 部门详情 -->
      <el-form ref="fieldForm" :model="content" label-position="top" size="mini" class="marginTop10" :rules="rules">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('show_label')"   prop="label">
              <el-input type="text" v-model="content.label"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('type')"    prop="type">
              <el-select v-model="content.type" class="el-select-w" @change="hanleChange">
                <el-option :label="$t('string')" value="string"></el-option>
                <el-option :label="$t('clob')" value="clob" :disabled="isClobOnly"></el-option>
                <el-option :label="$t('date')" value="date"></el-option>
                <el-option :label="$t('upload')" value="upload"></el-option>
                <el-option :label="$t('radio')" value="radio"></el-option>
                <el-option :label="$t('checkbox')" value="checkbox"></el-option>
                <el-option :label="$t('select')" value="select"></el-option>
                <el-option :label="$t('address')" value="address"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('owned_field')"    prop="name">
              <el-select :placeholder="content.name" v-model="content.name" disabled v-if="mode=='detail'" class="el-select-w"></el-select>
              <el-select v-model="content.name"  v-if="mode=='new'"  class="el-select-w">
                <el-option v-for="(elm,index) in unUseField" 
                  :key="index"
                  :value="elm"
                  :label="elm">
                </el-option> 
              </el-select>     
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('owned_module')"    prop="forTable">
              <el-select  v-model="content.forTable" disabled v-if="mode=='detail'" class="el-select-w">
                <el-option :label="$t('tableUser')" value="tableUser"></el-option>
                <el-option :label="$t('tableDept')" value="tableDept"></el-option>
                <el-option :label="$t('tableDomain')" value="tableDomain"></el-option>
              </el-select>
              <el-select v-model="content.forTable"  v-if="mode=='new'" class="el-select-w" @change="changeForTable" >
                <el-option :label="$t('tableUser')" value="tableUser"></el-option>
                <el-option :label="$t('tableDept')" value="tableDept"></el-option>
                <el-option :label="$t('tableDomain')" value="tableDomain"></el-option>
              </el-select>  
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('show_list')"    prop="enable">
              <el-select v-model="content.enabel" class="el-select-w" :disabled="isShowList">
                <el-option :label="$t('yes')" :value="true"></el-option>
                <el-option :label="$t('no')" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('order')"     prop="sortNumber">
              <el-input type="number" v-model="content.sortNumber" min="0" onKeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row><el-col :span="6">
          <el-form-item :label="$t('isRequire')">
            <el-radio v-model="content.isNotNull" :label="true">{{$t('yes')}}</el-radio>
            <el-radio v-model="content.isNotNull" :label="false">{{$t('no')}}</el-radio>
          </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('isRead')">
              <el-radio v-model="content.isReadonly" :label="true">{{$t('yes')}}</el-radio>
              <el-radio v-model="content.isReadonly" :label="false">{{$t('no')}}</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-if="showQuery">
            <el-form-item :label="$t('isQuery')">
              <el-radio v-model="content.isSupportSearch" :label="true">{{$t('yes')}}</el-radio>
              <el-radio v-model="content.isSupportSearch" :label="false">{{$t('no')}}</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="showOptions">
            <el-form-item :label="$t('options')"   prop="options" key="options">
              <el-input type="text" v-model="content.options"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-container>
  </el-container>
</template>

<script>
export default {
  props: {
    detail: Object,
    mode: String,
    type:String,
  },
  created() {
    this.content = {
      ...JSON.parse(JSON.stringify(this.detail)),
      isNotNull: this.detail.isNotNull ?  this.detail.isNotNull :  false,
      isReadonly: this.detail.isReadonly ?  this.detail.isReadonly :  false,
      isSupportSearch: this.detail.isSupportSearch ?  this.detail.isSupportSearch :  false
    };
    if(this.content.type == "radio" || this.content.type == "checkbox" || this.content.type == "select"){
      this.showOptions = true;
    }
    if(this.content.type == "string"){
      if(this.content.forTable=='tableDomain'){
        if(this.type=='system') this.showQuery = true;
      }else{
        this.showQuery = true;
      }
    }
    if(this.mode == "detail"){
      this.isClobOnly = true
    }
    this.orderType=this.content.type
    // this.getUnUseField(false);
  },
  data() {
    return {
      content: {},
      unUseField:[],
      defaultValue:"请选择",
      defaultForTable:"tableUser",
      haveField:false,
      showOptions:false,
      showQuery:false,
      isShowList:false,
      otherType:"",
      isClobOnly:false,
      rules:{
        label:[
          { required: true, message: this.$t('tag_name_required'), trigger: 'blur'}
        ],
        name:[
          { required: true, message: this.$t('field_required'), trigger: 'change'}
        ],
        type:[
          { required: true, message: this.$t('type_required'), trigger: 'change'}
        ],
        forTable:[
          { required: true, message: this.$t('module_required'), trigger: 'change'}
        ],
        options:[
          { required: true, message: this.$t('custom_option_required'), trigger: 'change'}
        ],
        sortNumber:[
          { pattern:/^[0-9]\d*$/,message:this.$t('sort_number_less_than_zero'),trigger:'change'}
        ],
      }
    };
  },
  computed:{
  },
  methods: {
    /**
     * 类型选择
     */
    hanleChange(val){
      //域模块，系统字段的扩展才会出现查询选项
      if(val=="string"){
        if(this.content.forTable=='tableDomain'){
          if(this.type=='system'){
            this.showQuery = true
          }else this.showQuery = false
        }else{
          //其余的不用判断
          this.showQuery = true
        }
      }else this.showQuery = false
      if(val == "radio" || val == "checkbox" || val == "select"){
        this.showOptions = true;
      }else{
        this.showOptions = false;
      }
      if(val == "clob" && !this.getUploadFileNma(this.content.name)){
        this.getUnUseField(true,"clob");
      }else{
        if(this.mode == "new"){
          this.getUnUseField(true);
        }
      }

      this.content.type = val
      this.$refs['fieldForm'].clearValidate();
    },
    /**
     * 获取图片上传的字段
     */
    getUploadFileNma(name){
      let fieldType = false;
      switch(name){
        case "field8":
          fieldType = true;
          break;
        case "field9":
          fieldType = true;
          break;
        case "field10":
          fieldType = true;
          break;
        case "field18":
          fieldType = true;
          break;
        case "field19":
          fieldType = true;
          break;
        case "field20":
          fieldType = true;
          break;
      }
      return fieldType;
    },
    changeForTable(val){
      this.showQuery = false;
      this.isShowList = false;
      if(val=="tableUser" && this.content.type =="string"){
        this.defaultForTable="tableUser"
        this.showQuery = true;
      }else if(val == "tableDept"){
        this.defaultForTable="tableDept"
        // 所属模块为部门也能出现是否查询选项
        if(this.content.type =="string")
          this.showQuery = true;
      }else if(val == "tableDomain"){
        // this.isShowList = true;
        this.content.enabel = false;
        this.defaultForTable="tableDomain"
        if(this.content.type =="string" && this.type=='system')//目前是域模块系统字段中才会出现查询
          this.showQuery = true;
      }
      
      if(this.content.type == "clob"){
        this.getUnUseField(true,"upload");
      }else{
        this.getUnUseField(true);
      }
    },
    getUnUseField(check,type){
      let that=this;
      const fileType = type ? type : '';
      this.$api.getUnuserField(
        fileType,that.defaultForTable,(that.$route.query.domainid?that.$route.query.domainid:''),
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              that.unUseField=resp.data.data;
              if(check &&this.content.name){
                that.content.name=null
              }
            } 
          },
        }
      );
    },
    onSaveBtnClick(formName,type="") {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let content={
            "label": "",
            "respectiveField": "",
            "sortNumber": "",
            "type": "",
            "options": "",
            "isNotNull": false, // 是否必填
            "enabel": false,
            "forTable": "",
            "isReadonly": false,
            "domainid": "",
          }
          if (this.content.fid) {
            //更新
            content={
              "domainid":  this.$route.query.domainid,
              "label": this.content.label,
              "respectiveField": this.content.name,
              "sortNumber": parseInt(this.content.sortNumber),
              "type": this.content.type,
              "options": this.content.options,
              "isNotNull": this.content.isNotNull,
              "enabel": this.content.enabel,
              "forTable": this.content.forTable,
              "isReadonly": this.content.isReadonly,
              "isSupportSearch": this.content.isSupportSearch
            }
            this.$api.updateFieldExtend(
              {
                fieldexid: this.content.fid,
                data: content
              },
              {
                onSucess: resp => {
                  if (resp.data.errcode == 0) {
                    this.$message({
                      showClose: true,
                      message: this.$t('msg_save_success'),
                      type: "success"
                    });
                    if(type=='saveandnew'){
                      this.content={};
                      this.$refs[formName].resetFields();
                    }
                    else
                      this.$emit('exit')
                     this.$emit('refresh')
                  } else {
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }   
                },
                onError:(resp) => {
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "false"
                  });
                }
              }
            );
          } else {
            //新建
            
            content={
              "domainid":  this.$route.query.domainid?this.$route.query.domainid:'',
              "label": this.content.label,
              "respectiveField": this.content.name,
              "sortNumber": parseInt(this.content.sortNumber),
              "type": this.content.type,
              "options": this.content.options,
              "isNotNull": this.content.isNotNull,
              "enabel": this.content.enabel,
              "forTable": this.content.forTable,
              "isReadonly": this.content.isReadonly,
              "isSupportSearch": this.content.isSupportSearch
            }
            this.$api.createFieldExtend(
              {
                data: content
              },
              {
                onSucess: resp => {
                  if (resp.data.errcode == 0) {
                    this.$message({
                      showClose: true,
                      message: this.$t('msg_save_success'),
                      type: "success"
                    });
                    if(type=='saveandnew'){
                      this.content={};
                      this.$refs[formName].resetFields();
                    } else
                      this.$emit('exit')
                     this.$emit('refresh')
                  } else {
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                },
                onError:(resp) => {
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
              }
            );
          }
        }
      })
    },
    onSaveAndNewBtnClick(formName){
      this.onSaveBtnClick(formName,'saveandnew')
      this.mode = "new"
      this.content = {"forTable":"tableUser","enabel":false};
      this.isClobOnly = false;
    },
    onExitBtnClick(){
     this.$emit("exit")
    }
  }
};
</script>

<style>
</style>